<template>
    <div>
        <div class="recommendation-list">
            <router-link to="/detail">
                <div class="recommendation-item" v-for="item in phones">
                    <div class="item-image"><img :src="item.image" alt=""></div>
                    <p class="item-name">{{ item.name }}</p>
                    <p class="item-desc">{{ item.desc | setUserName }}</p>
                    <p class="item-price">${{ item.price }}</p>
                    <button class="add-to-cart">立即购买</button>
                </div>
            </router-link>
            <router-link to="/">
                <span class="more">更多超值会商品></span>
            </router-link>
        </div>
    </div>
</template>
<style>
.recommendation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;


    a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .recommendation-item {
            width: 50%;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 14px;
            margin-bottom: 10px;
            .item-image {
                width: 100%;

                img {
                    width: 100%;
                    height: 150px;
                }
            }

            .item-name {
                font-size: 17px;
                margin-bottom: 8px
            }

            .item-desc {
                margin-bottom: 2px;
                color: #666;
                font-size: 10px;
            }

            .item-price {
                color: red;
                font-size: 16px;
                margin: 5px 0;
            }

            .add-to-cart {
                background-color: red;
                color: white;
                border: none;
                padding: 8px 16px;
                border-radius: 4px;
                cursor: pointer;
            }
        }
    }

    .more {
        display: block;
        text-align: center;
        margin-top: 20px;
        color: #666;
        font-size: 16px;
        cursor: pointer;
        margin-top: 2f0px;
    }
}
</style>

<script>
import { best } from '../api/index'
export default {
    data() {
        return {
            phones: []
        }
    },
    filters: {
        setUserName(value) {
            return value.slice(0, 16) + "..."
        }
    },
    methods: {
        async getRecommendList() {
            // 选择从四开始的偶数的section
            await best()
                .then(
                    content => {
                        console.log(content);
                        let { code, data: { data: { sections } } } = content;

                        // 遍历sections
                        let result = [];
                        for (let i = 0; i < sections.length; i++) {
                            if (i % 2 === 0 & i >= 4 & i < 10) {
                                let section = sections[i];
                                let items = section.body.items;
                                result = result.concat(items);
                            }
                        }

                        if (code === 0) {
                            let newArr = result.map(item => {
                                let obj = {};
                                obj.image = item.img_url;
                                obj.name = item.product_name;
                                obj.desc = item.product_brief;
                                obj.price = item.market_price;
                                obj.id = item.product_id;
                                return obj;
                            })
                            this.phones = newArr
                            console.log(this.phones)
                        }


                    }
                )
                .catch(
                    (error) => {
                        console.log('请求失败', error)
                    }
                )
        }
    },
    created() {
        this.getRecommendList()
    }
}
</script>